<template>
  <div class="help-text-warp">
    <div class="help-text-search">
      <h1>组工助手</h1>
      <div>
        <el-input
          placeholder="我们能帮你什么吗？"
          size="medium"
          clearable
          style="width: 500px;
                height: 50px;
                border-radius: 10px;"
          @keyup.enter.native="seachEnter"
          v-model="queryForm.textTitle"
        />
        <el-button
          size="medium"
          icon="el-icon-search"
          @click="getTextList"
        >
          搜索
        </el-button>
      </div>
      <p>
        <span>
          热门标签：
          <font
            v-for="(item, index) in items"
            style="font-size: 16px"
            :key="index"
            @click="searchByTag(item.label)"
          >{{ item.label }}&nbsp;</font>
        </span>
      </p>
    </div>

    <div class="help-text-content">
      <p>
        <i
          class="el-icon-question"
          style="color:red;"
        />常见搜索
      </p>
      <ol>
        <li
          v-for="(item, index) in textItem"
          :key="index"
        >
          <a @click="showPopUp(index)">{{ item.textTitle }}</a>
        </li>
      </ol>
    </div>
    <div class="help-text-footer">
      <el-card class="box-card">
        <i class="el-icon-video-play" />
        <p>入门</p>
        <span>在30分钟内开始使用HelpTextSearch</span>
      </el-card>
      <el-card class="box-card">
        <i class="el-icon-video-play" />
        <p>入门</p>
        <span>在30分钟内开始使用HelpTextSearch</span>
      </el-card>
      <el-card class="box-card">
        <i class="el-icon-video-play" />
        <p>入门</p>
        <span>在30分钟内开始使用HelpTextSearch</span>
      </el-card>
    </div>
    <helpShowTextPage
      ref="helpShowTextPageRef"
      :search-results="searchResults"
      v-if="helpShowTextPageFlag"
      :total="total"
      @refresh="getTextList"
      @change-page="handlePageChange"
      :is-parent-data-loaded.sync="isParentDataLoaded"
    />
    <helpSearchDialog
      ref="helpSearchDialogRef"
      v-if="helpSearchDialogFlag"
      :selected-item="selectedItem"
    />
  </div>
</template>
<script>
  import helpShowTextPage from "./helpShowTextPage.vue";
  import helpSearchDialog from "./helpSearchDialog.vue"
  import { helpTextList } from "@/api/datacentersg/archives/helpText";
  import { getList } from "@/api/datacentersg/archives/label";
  import store from "@/store";
  export default {
    components: { helpShowTextPage, helpSearchDialog },
    data () {
      return {
        items: [],
        searchResults: [],
        textTitle: [],
        total: 0,
        page: {
          currentPage: 1,
          pageSize: 10,
        },
        queryForm: {
          textTitle: ``,
          textLabel: ``,
        },
        isParent: `parent`,
        selectedItem: null,
        textItem: [],
        isParentDataLoaded: false,
        helpSearchDialogFlag: false,
        helpShowTextPageFlag: false,
      }
    },
    created () {
      this.getTagDataList();
      // this.getTextList();
      this.getTextTitle();
      this.init();
    },
    methods: {
      init () {
        this.helpShowTextPageFlag = true;
        this.helpSearchDialogFlag = true;
      },
      searchByTag (label) {
        this.queryForm.textLabel = label;
        this.getTextList().then(() => {
          this.helpShowTextPageFlag = true;
          this.$refs.helpShowTextPageRef.init();
        });
      },
      handlePageChange (page) {
        this.page.currentPage = page;
        this.getTextList()
          .then(() => {
            this.$refs.helpShowTextPageRef.updateData(
              this.searchResults,
              this.total,
              this.page.currentPage,
            );
          })
          .catch((error) => {
            console.error(error);
          });
      },

      getTextList () {
        return new Promise((resolve, reject) => {
          const params = {
            userId: store.getters.userId.toString(),
            token: store.getters.token.toString(),
            userName: store.getters.userName.toString(),
            data: {
              textBussinessTypeCode: 111,
              textTitle: this.queryForm.textTitle,
              pageSize: this.page.pageSize,
              currentPage: this.page.currentPage,
            },
          };
          if (this.queryForm.textLabel.length > 0) {
            params.data.textLabel = this.queryForm.textLabel;
          }
          helpTextList(params)
            .then((data) => {
              if (data.result) {
                this.searchResults = data.resultdata.data;
                this.total = data.resultdata.count
                this.queryForm.textLabel = ``;
                this.helpShowTextPageFlag = true;
                this.$refs.helpShowTextPageRef.init();
                resolve();
              }
            })
            .catch((error) => {
              reject(error);
              // this.$message({
              //     type: 'error',
              //     message:"没有你查询的这条数据"
              // })
            });
        });
      },
      getTextTitle () {
        const params = {
          userId: store.getters.userId.toString(),
          token: store.getters.token.toString(),
          userName: store.getters.userName.toString(),
          data: { textBussinessTypeCode: 111 },
        };
        helpTextList(params)
          .then((data) => {
            if (data.result) {
              this.textItem = data.resultdata.data.slice(0, 9)
            }
          })
      },

      showPopUp (index) {
        // 根据索引获取相应的数据并将其赋值给selectedItem
        this.helpSearchDialogFlag = true;
        this.selectedItem = this.textItem[index];
        this.$refs.helpSearchDialogRef.init();
      },

      getTagDataList () {
        const params = {
          data: { fileBusinessTypeId: `111` },
          userId: store.getters.userId.toString(),
          token: store.getters.token.toString(),
          userName: store.getters.userName.toString(),
        };
        getList(params).then((data) => {
          if (data.result) {
            const items = [];
            data.resultdata.data.forEach(function (obj, index) {
              items.push({
                label: obj.labelName,
                index: index,
              });
            });

            this.items = items;
          }
        });
      },
      seachEnter (e) {
        const keyCode = window.event ? e.keyCode : e.which;
        if (keyCode == 13) {
          this.getTextList(); //搜索按钮的回调
        }
      },

    },
  }
</script>

<style scoped lang="scss">
.help-text-warp {
  padding: 10px 0;
  overflow-y:scroll;
  .help-text-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("https://i-1.lanrentuku.com/2020/7/9/65fd8b29-ceed-4235-bc80-2e18f007b734.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 250px;
    color: #fff;
    .el-input__icon .el-icon-search{
      margin-top: -10px;
    }
  }
  .help-text-content {
    //  padding: 0 300px;
     margin-left: 350px;
     height: 300px;
     p{
      display: inline-block;
      font-size: 20px;
      font-weight:bolder;
      padding: 20px 0;
     }
     ol{
      display: flex;
      flex-wrap: wrap;
      li{
        color: gray; /* 灰色 */
        padding: 5px;
        flex-basis: calc(33.33% - 10px);
        a{
          color:#2F67C3;
          text-decoration:none
        }
        a:hover{
          text-decoration: underline;
        }
      }
     }
  }

  .help-text-footer{
    padding: 0 400px;
    display: flex; /* 将容器设置为弹性盒子 */
    flex-wrap: wrap; /* 当容器宽度不足以容纳所有项时换行 */
    justify-content: space-around; /* 在每个项目之间平均分配空间 */
    .box-card {
      width: calc(33.33% - 10px); /* 设置卡片宽度为容器宽度的1/3减去间距 */
      margin-top: 10px;
      i{
        font-size:60px;
        color: #2F67C3;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      p{
        text-align: center;
        font-size: 20px;
        font-weight: bolder;
      }
      span{
        text-align: center;
        display: inline;
      }
    }
  }
}

</style>
